﻿<style type="text/css">
	body { font-size: 62.5%; }
	input.text { margin-bottom:12px; width:95%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
	h1 { font-size: 1.2em; margin: .6em 0; }
	div#users-contain { width: 350px; margin: 20px 0; }
	div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
	div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	.ui-state-error { padding: .3em; }
	.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script type="text/javascript">
    $(function () {
        var username = $("#txtUserName"),
		password = $("#txtPassword"),
        isPersistent;
        allFields = $([]).add(username).add(password),
		tips = $(".validateTips");

        function updateTips(t) {
            tips
			.text(t)
			.addClass("ui-state-highlight");
            setTimeout(function () {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("Length of " + n + " must be between " +
				min + " and " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }

        $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Sign In": function () {
                    var customInfo = null;
                    var redirectUrl = null;

                    var bValid = true;
                    allFields.removeClass("ui-state-error");

                    bValid = bValid && checkLength(username, "username", 3, 16);
                    bValid = bValid && checkLength(password, "password", 5, 16);

                    bValid = bValid && checkRegexp(username, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                    bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");

                    if (bValid) {
                        isPersistent = $("#ckRememberMe").attr("checked");

                        $.ajax({
                            url: '@Url.Action( "LogOn", "Account" )',
                            type: 'post',
                            contentType: "application/json; charset=utf-8",
                            dataType: 'json',
                            data: "{ 'username': '" + username.val() + "', 'password':'" + password.val() + "', 'RememberMe': '" + isPersistent + "'}",
                            success: onLoginComplete,
                            error: onError
                        });
                    }
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            },
            close: function () {
                allFields.val("").removeClass("ui-state-error");
            }
        });

        function onLoginComplete(result) {
            $("#header_logon").html('<br /><br />Welcome <b>supertigerzou</b>![ <a href="/Account/LogOff">Log Off</a> ]');
            $("#dialog-form").dialog("close");
        }

        function onError(result) {
            $('#loginFailed').show();
        }

        $("#signin").click(function () {
            $("#dialog-form").dialog("open");
        });
    });
</script>

<div id="header_logon" class="header-logon">
    <br /><br />

    @if(Request.IsAuthenticated) {
        <text>Welcome <b>@Context.User.Identity.Name</b>!
        [ @Html.ActionLink("Log Off", "LogOff", "Account") ]</text>
    }
    else {
        <a id="signin" @*href="@Url.Action("Logon", "Account")"*@ class="SiteLinkBold">
            <img src="@Url.Content("~/Content/Images/Keys.png")" alt="" /><br />Sign In
        </a>
    }
</div>      
<div id="dialog-form" title="Sign In">
	<p class="validateTips">All form fields are required.</p>

	<form>
	    <fieldset>
		    <label for="name">Name</label>
		    <input type="text" name="name" id="txtUserName" class="text ui-widget-content ui-corner-all" />
		    <label for="password">Password</label>
		    <input type="password" name="password" id="txtPassword" value="" class="text ui-widget-content ui-corner-all" />
            <label for="rememberme">RememberMe</label>
		    <input type="checkbox" name="rememberme" id="ckRememberMe" class="text ui-widget-content ui-corner-all" />
	    </fieldset>
	</form>
</div>



